<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08_v-for遍历JSON</title>
    <style>
        table,td,th{
            text-align: center;
            border:2px solid,red;
            border-collapse: collapse;
        }
        .app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="app" class="app">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>身高</th>
        </tr>
        <tr v-for=" (item,index) in array1">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.height}}</td>
        </tr>
    </table>
    </div>
    <script src="js/vue2.js"></script>
    <script>
        new Vue({
                el: '#app',
                data: {
                array1: [
                    {name: '李白', age: '88', sex: '男', height: '168'},
                    {name: '高适', age: '99', sex: '男', height: '184'},
                    {name: '李清照', age: '78', sex: '女', height: '173'},
                    {name: '王维', age: '69', sex: '男', height: '181'}
                ]
            }
        });
    </script>
</body>
</html>